<template>
  <div class="i18n-contain">
    <el-table v-loading="loading" :data="I18nList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="language_tag" label="语言标签" width="140" />
      <el-table-column prop="code" label="国际化标识" />
      <el-table-column prop="message" label="文本值" />
      <el-table-column prop="remarks" label="备注" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
            class="box-item"
            title="您确定要删除吗"
            placement="top"
            @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button size="small" type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="i18-pagination mt-5 justify-center flex items-center">
      <span class="mr-3">共{{ total }}条数据</span>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-model:current-page="currentPage"
        :page-size="pageSize"
        @Change="handlePageChange"
      />
    </div>
  </div>
  <UpdateI18n v-model:visible="showModal" :edit-data="currentEditRow" @confirm="handleUpdateConfirm" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getI18nList, deleteI18nItem } from '@/api/I18n'
import { ElMessage } from 'element-plus'
import { updateI18nItem } from '@/api/I18n'
import UpdateI18n from '@/components/UpdateI18n.vue'

interface II18n {
  code: string
  created_at: string
  id: number
  language_tag: string
  message: string
  remarks: string
}


const showModal = ref(false)
const loading = ref(false)
const pageSize = ref(10)
const total = ref(0)
const currentPage = ref(1)
const I18nList = ref<II18n[]>([])
const currentEditRow = ref<II18n | null>(null)


const getI18nData = (current: number) => {
  loading.value = true
  getI18nList<{ records: II18n[]; total: number }>({
    current: current + '',
    currentSize: pageSize.value + '',
  })
    .then((res) => {
      I18nList.value = res.data.records
      total.value = res.data.total
    })
    .finally(() => {
      loading.value = false
    })
}

const handlePageChange = (value: number) => {
  getI18nData(value)
}

const handleEdit = (row: II18n) => {
  // 将当前行数据传递给编辑组件
  currentEditRow.value = row;
  showModal.value = true;
}

const handleUpdateConfirm = (formData: any) => {
  // 构造更新请求的数据
  const updateData = {
    code: formData.code,
    languageTexts: [{
      languageTag: formData.languageTexts[0].languageTag,
      message: formData.languageTexts[0].message
    }],
    remarks: formData.remarks
  };
  
  updateI18nItem(updateData).then(res => {
    console.log("编辑成功:", res);
    ElMessage.success("编辑成功");
    // 刷新列表
    getI18nData(currentPage.value);
    showModal.value = false;
  }).catch(err => {
    console.error("编辑失败:", err);
    ElMessage.error("编辑失败");
  });
}


const handleDelete = (data: II18n) => {
  console.log(data)
  deleteI18nItem(data.code).then(() => {
    ElMessage.success('删除成功')
    getI18nData(currentPage.value)
  })
}

onMounted(() => {
  getI18nData(1)
})
</script>

<style scoped>
.i18n-contain {
  padding: 20px;
}

:deep(.el-table .el-table__row) {
  height: 55px; /* 设置每行固定高度 */
}
</style>
